<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>猿来在路上</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        display: flex;
        width: 100vw;
        height: 100vh;
        font-family: "仿宋";
        background: url(./images/bg.webp) no-repeat;
        overflow: hidden;
      }

      .wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      main {
        flex: 1;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        padding: 80px 60px;
      }

      .box-left {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 300px;
        padding: 20px;
        /* background:#fff; */
        border: 1px solid #efefef;
        border-radius: 12px;
        opacity: 0.8;
      }

      h2 {
        margin-bottom: 8px;
      }

      h2:hover {
        color: #5fd89e;
      }

      .list {
        list-style: none;
        font-size: 16px;
        line-height: 30px;
      }

      .item {
        font-weight: 500;
      }

      .item:hover {
        color: #5fd89e;
      }

      .authors {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        width: 100%;
      }

      .authors:hover {
        color: #5fd89e;
      }

      .box-right {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 300px;
        height: 200px;
        padding: 20px;
        border: 1px solid #efefef;
        border-radius: 12px;
      }

      .to-inner {
        font-family: "Courier New", Courier, monospace;
        text-decoration: none;
        color: #333333;
        line-height: 24px;
      }

      .to-inner:hover {
        color: #5fd89e;
      }

      footer {
        box-sizing: border-box;
        height: 40px;
        width: 100%;
        /* padding:12px 20%; */
        color: #fff;
        background: #749786;
        border-top: 1px solid #eaeaea;
        text-align: center;
      }

      .to-beian {
        text-decoration: none;
        color: #ecebeb;
        line-height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <main>
        <div class="box-left">
          <h2>记录开发的一些东西</h2>
          <ul class="list">
            <li class="item">- 难题及解决方法</li>
            <li class="item">- 知识点汇总</li>
            <li class="item">- 一些随笔</li>
          </ul>
          <div class="authors">—— 王 朱</div>
        </div>
        <div class="box-right">
          <h2>穿梭机</h2>
          <a class="to-inner" target="_blank" href="//colors.0230812.xyz/"
            >color website</a
          >
          <a class="to-inner" target="_blank" href="//knowledge.0230812.xyz/"
            >knowledge website</a
          >
          <a class="to-inner" target="_blank" href="//2048.0230812.xyz/"
            >2048-对战</a
          >
        </div>
      </main>
      <footer>
        <a class="to-beian" href="https://beian.miit.gov.cn/" target="_blank"
          >琼ICP备2024034061号-1</a
        >
      </footer>
    </div>
  </body>
</html>
